<template>
  <el-dialog
    class="assign-role"
    title="分配角色"
    :visible="showRoleDialog"
    @close="handleClose"
    @open="handleOpen"
  >
    <!-- 这里准备复选框, 所有的选中的项的label值，都会被收集到数组中 -->
    <el-checkbox-group v-model="roleIds" v-loading="isLoading">
      <!-- 复选框展示给用户看的，需要配置标签节点内容
           复选框配置提交给后台的数据，需要配置label

           tips: 如果内容部分没有配置，会默认将label作为内容展示给用户
      -->
      <el-checkbox
        v-for="item in list"
        :key="item.id"
        :label="item.id"
      >{{ item.name }}</el-checkbox>
    </el-checkbox-group>

    <template #footer>
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { reqGetRoleList } from '@/api/setting'
import { reqGetUserDetailById } from '@/api/user'
import { reqAssignRoles } from '@/api/employees'
export default {
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    // 用户的id 用来查询当前用户的角色信息
    userId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      roleIds: [], // 被选中的项的 id 集合
      list: [], // 请求回来回显的角色列表
      isLoading: false
    }
  },
  created() {

  },
  methods: {
    handleClose() {
      this.$emit('update:showRoleDialog', false)
    },
    async getDetail() {
      // 获取当前用户的所有角色，拿到角色id列表
      const { data: { roleIds }} = await reqGetUserDetailById(this.userId)
      this.roleIds = roleIds
      return roleIds
    },
    // async 函数，底层自带一层 promise 封装
    async getRoleList() {
      // 获取的是全部的角色
      const { data: { rows }} = await reqGetRoleList(1, 1000)
      this.list = rows
      return rows
    },
    // loading需求：
    // 1. 开始发送请求时，立刻开启loading效果
    // 2. 等所有的请求，都发回来之后，才关闭loading
    // Promise.all([p1, p2]).then(values => {  xxx  })
    // handleOpen() {
    //   this.isLoading = true
    //   const p1 = this.getRoleList() // 获取角色列表，进行展示
    //   const p2 = this.getDetail() // 获取当前用户的所有角色，进行回显
    //   Promise.all([p1, p2]).then(values => {
    //     setTimeout(() => (this.isLoading = false), 300)
    //   })
    // },
    async handleOpen() {
      this.isLoading = true
      await Promise.all([this.getRoleList(), this.getDetail()])
      setTimeout(() => (this.isLoading = false), 300)
    },
    async handleSubmit() {
      await reqAssignRoles({
        id: this.userId,
        roleIds: this.roleIds
      })
      this.$message.success('分配角色成功')
      this.handleClose()
    }
  }
}
</script>
